<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
        }
        #div1>div{
            width: 21%;
        }
        img{
            width: 220px;
            transition-duration:1s;
        }

        img:hover{
            transform: translate(0,-10px) ;
        }
    </style>
</head>
<body>
<div id="div1">
    <div>
        <img src="img/x1.jpg" alt=""><br>
        <p style="text-align: center">金秋佳节 全场潮鞋  只要98</p><br>    </div>
    <div>
        <img src="img/x2.jpg" alt=""><br>
        <p style="text-align: center">金秋佳节 全场潮鞋  只要98</p><br>    </div>

    <div>
        <img src="img/x10.jpg" alt="" ><br>
        <p style="text-align: center">金秋佳节 全场潮鞋  只要98</p><br>    </div>
    <div>
        <img src="img/x11.jpg" alt="" ><br>
        <p style="text-align: center">金秋佳节 全场潮鞋  只要98</p><br>    </div>
    <div>
        <img src="img/x5.jpg" alt=""><br>
        <p style="text-align: center">金秋佳节 全场潮鞋  只要98</p><br>    </div>
    <div>
        <img src="img/x8.jpg" alt=""><br>
        <p style="text-align: center">金秋佳节 全场潮鞋  只要98</p><br>    </div>
    <div>
        <img src="img/x9.jpg" alt=""><br>
        <p style="text-align: center">金秋佳节 全场潮鞋  只要98</p><br>    </div>
    <div>
        <img src="img/x12.jpg" alt=""><br>
        <p style="text-align: center">金秋佳节 全场潮鞋  只要98</p><br>
    </div>
    <div>
        <img src="img/x3.jpg" alt=""><br>
        <p style="text-align: center">金秋佳节 全场潮鞋  只要98</p><br>
    </div><div>
    <img src="img/x4.jpg" alt=""><br>
    <p style="text-align: center">金秋佳节 全场潮鞋  只要98</p><br>
</div><div>
    <img src="img/x6.jpg" alt=""><br>
    <p style="text-align: center">金秋佳节 全场潮鞋  只要98</p><br>
</div><div>
    <img src="img/x7.jpg" alt=""><br>
    <p style="text-align: center">金秋佳节 全场潮鞋  只要98</p><br>
</div>
</div>
</body>
</html>